<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-08 16:18:47
 * @FilePath: \vue3_test\src\App.vue
 * @Description: Demo
-->
<template>
  <h2>当前求和为: {{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前的信息为: {{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr />
  <h2>姓名: {{ person.name }}</h2>
  <h2>年龄: {{ person.age }}</h2>
  <h2>薪资: {{ person.job.j1.salary }}K</h2>
  <button @click="person.name += `~`">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  name: "DemoTest",
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // 情况一: 监视ref所定义的一个响应式数据
    /* watch(
      sum,
      (newValue, oldValue) => {
        console.log("sum变了", newValue, oldValue);
      },
      { immediate: true}
    ); */

    // 情况二: 监视ref所定义的多个响应式数据
    /*  watch(
      [sum, msg],
      (newValue, oldValue) => {
        console.log("sum或msg变了", newValue, oldValue);
      },
      { immediate: true }
    ); */

    /* 情况三: 监视reactive定义的一个响应式数据的全部属性
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视(deep配置无效) */
    /*  watch(person, (newValue, oldValue) => {
      console.log("person变化了", newValue, oldValue);
    }); */

    // 情况四: 监视reactive定义的一个响应式数据中的某个属性
    /* watch(
      () => person.age,
      (newValue, oldValue) => {
        console.log("person的age变化了", newValue, oldValue);
      }
    ); */

    // 情况五: 监视reactive定义的一个响应式数据中的某些属性
    /* watch([() => person.name, () => person.age], (newValue, oldValue) => {
      console.log("person的name或age变化了", newValue, oldValue);
    }); */

    // 特殊情况:
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person的job变化了", newValue, oldValue);
      },
      { deep: true }
    );
    // 返回一个对象(常用)
    return {
      sum,
      person,
      msg,
    };
  },
};
</script>
